window.gallery = (function(){
    var setup = function(){
        this.clientX = 0
        this.clientY = 0
        var userAgent = window.navigator.userAgent.toLowerCase()
        if(userAgent.match(/MicroMessenger/i)=='micromessenger'){
            this.iswx = true
        }else{
            this.iswx = false
        }
        if(userAgent.match(/android/i)=='android'){
            this.isandroid = true
        }else{
            this.isandroid = false
        }
    }
    setup.prototype = {
        init : function(em){
            var _self = this
            var userAgent = window.navigator.userAgent.toLowerCase()
            if(em){
                var targets = em
            }else if(_self.iswx&&_self.isandroid){
                var targets = $('[data-imgsrc]')
            }else{
                var targets = $('img').not('.footer-nav img')
            }
            targets.click(function(){
                $('body').css({'overflow':'hidden','height':$(window).height()+'px'})
                _self.createImgBox(this)
            })
        },
        createImgBox : function(em){
            var imgBox = $('<div class="imgBox"></div>')
            var _self = this
            //有 data-imgsrc则优先读取
            this.imgsrc = typeof($(em).attr('data-imgsrc')) == 'string' ? $(em).attr('data-imgsrc') : $(em).attr('src') 
            console.log( typeof($(em).attr('data-imgsrc')))
            //图像
            var img = $('<img>')
                .attr('src',this.imgsrc)
                .on({
                    'touchstart':function(e){
                        var m_x = e.originalEvent.targetTouches[0].clientX
                        var m_y = e.originalEvent.targetTouches[0].clientY
                        var offset_l = this.offsetLeft
                        var offset_t = this.offsetTop
                        var img_x = $(this).offset().left
                        var img_y = $(this).offset().top
                        var pos_x = $(this).position().left
                        var pos_y = $(this).position().top

                        _self.clientX = m_x-offset_l
                        _self.clientY = m_y-offset_t

                        console.log('触摸位置',m_x,m_y)
                        console.log('img相对父元素位置offset',img_x,img_y)
                        console.log('img相对位置',pos_x,pos_y)
                        console.log('img相对父元素位置',offset_l,offset_t)
                        console.log('触摸位置相对img的位置'+_self.clientX,_self.clientY)

                    },
                    'touchmove':function(e){
                        if(e.originalEvent.targetTouches.length==1){
                            var m_x = e.originalEvent.targetTouches[0].clientX
                            var m_y = e.originalEvent.targetTouches[0].clientY
                            $(this).css({
                                top:(m_y-_self.clientY)+'px',
                                left:(m_x-_self.clientX)+'px',
                            })
                        }else if(e.originalEvent.targetTouches.length>=2){
                            //待添加双指放大事件
                        }

                    }
                }).appendTo(imgBox)
            
            //关闭按钮
            var closeBtn = $('<div class="closeBtn"></div>').text('×').appendTo(imgBox).bind('click',function(){
                _self.delImgBox(this)
            })
            imgBox.appendTo('body')

            //放大缩小按钮
            var zoomBtn = $('<div class="zoom"></div>').appendTo(imgBox)

            var zoomOut = $('<div class="zoomOut">+</div>').on('click',function(){
                _self.zoomOut($('.imgBox img'))
            }).appendTo(zoomBtn)

            var zoomIn = $('<div class="zoomIn">-</div>').on('click',function(){
                _self.zoomIn($('.imgBox img'))
            }).appendTo(zoomBtn)
            
            //图像加载事件
            img
            .load(function(){
                $('.imgBox').css('backgroundImage','')
                $(this).css({
                    top:$(this).offset().top+'px',
                    transform:'translateY(0)',
                    '-webkit-transform':'translateY(0)'
                })
                _self.origin_height = $(this).height()
                _self.origin_width = $(this).width()
            })
            .error(function(){
                $('.imgBox').css('backgroundImage','').append('<div style="display:flex;justify-content:center;align-items:center;height:100%;color:red;">图片加载失败</div>')
                $(this).remove()
            })

        },
        delImgBox : function(em){
            $(em).unbind('click')
            $('.imgBox').remove()
            $('body').css({'overflow':'auto','height':'auto'})
        },
        zoomOut : function(em){
            var origin_width = em.width()
            var origin_height = em.height()
            var origin_left = Number(em.css('left').replace('px',''))
            var origin_top = Number(em.css('top').replace('px',''))
            var l = origin_left-origin_width*0.1/2
            var t = origin_top-origin_height*0.1/2
            em.css({
                width : origin_width*1.1+'px',
                height : origin_height*1.1+'px',
                left : l+'px',
                top : t+'px',
            })
        },
        zoomIn : function(em){
            var origin_width = em.width()
            var origin_height = em.height()
            var origin_left = Number(em.css('left').replace('px',''))
            var origin_top = Number(em.css('top').replace('px',''))
            var l = origin_left+origin_width*0.1/2
            var t = origin_top+origin_height*0.1/2
            em.css({
                width : origin_width*0.9+'px',
                height : origin_height*0.9+'px',
                left : l+'px',
                top : t+'px',
            })
        }
    }
    return setup
})()